<!DOCTYPE html>
<head>
    <title>Encode</title>
    <link href="/static/encode.css" rel="stylesheet" type="text/css">
</head>
<body>
    <img id=logo src="/static/deaddroplogo.jpg" />
    <h1>Encode</h1>
    <div id=navbar>
        <ol>
            <li><a href="home.html">Home</a></li>
            <li><a href="instructions.html">Instructions</a></li>
            <li><a href="encode.html">Encode</a></li>
            <li><a href="decode.html">Decode</a></li>
            <li><a href="create.html">Create</a></li>
        </ol> 
    </div>
    <form action='encode' method='get'>
        <label id=keyLabel>Key</label>
        <textarea id="keyBox" name="id_number" rows="1" cols="15">{{id_number}}</textarea>
        <h2>Text</h2>
        <textarea name="input" class="inputText" rows="20" cols="50">{{inputText}}</textarea>
        <button id="goButton">Encode</button>
        <textarea class="outputText" rows="20" cols="50">{{output}}</textarea>
    </form>
    <a href="encode.html"><button id='resetButton'>Reset</button></a>
</body>
